<template>
  <el-form v-model="formData" label-width="80px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="课程名称:">
          <el-input v-model=" formData.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="课程排序:">
          <el-input v-model=" formData.sort" type="number"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="课程描述:">
          <el-input v-model=" formData.description" type="textarea"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="课程价格:">
          <el-input v-model=" formData.price" type="number"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否上架:">
<!--          <el-switch v-model=" formData.is_active"></el-switch>-->
          <el-radio-group v-model=" formData.is_active">
            <el-radio value="1">是</el-radio>
            <el-radio value="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="课程封面:">
          <el-upload
              ref="upload"
              list-type="picture-card"
              :on-remove="handleRemove"
              :on-preview="handlePictureCardPreview"
              :on-success="handlerSuccess"
              :on-exceed="handlerExceed"
              :limit="1"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          >
            <el-icon>
              <Plus/>
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img
                style="width: 100%; height: 100%"
                :src="dialogImageUrl"
                alt="Preview Image"
            />
          </el-dialog>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <el-button type="primary" plain @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>


<script setup>
import {ref, defineEmits} from 'vue';
import {ElMessage} from 'element-plus';
import {Plus} from "@element-plus/icons-vue";

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
//照片墙预览
const handlePictureCardPreview = () => {
  //触发预览的钩子的时候，对话框显示
  dialogVisible.value = true;
};
//照片墙删除图片
const handleRemove = () => {
  //删除图片的钩子，清空图片路径
  dialogImageUrl.value = '';
};

// 图片上传超出限制
const handlerExceed = (files, fileList) => {
  ElMessage.error('上传图片不能超过1张');
};

// 图片上传成功
const handlerSuccess = ( ) => {
  // 上传成功后，将图片路径赋值给表单数据
  formData.value.cover = dialogImageUrl.value;
};

// 表单数据
const formData = ref({
  name: '',
  sort: '',
  description: '',
  price: '',
  is_active:1,
  cover: ''
});

// 表单取消
const emits = defineEmits(['close'])
const handleCancel = () => {
  emits('close');
};

// 表单提交
const handleSubmit = () => {
  if (formData.value.name === '' || formData.value.sort === '' || formData.value.description === '' || formData.value.price === '') {
    ElMessage.error('请填写完整信息');
  } else {
    ElMessage.success('提交成功');
    console.log(formData.value);
    emits('close');
    formData.value = {
      name: '',
      sort: '',
      description: '',
      price: '',
      is_active: false,
      cover: ''
    }
  }
};


</script>


<style scoped>

</style>